<template>
<div class="main">
   <div class="maincontain">
      <div class="maintop">
      <div class="mainhead">
        <div class="mainleft">
          <div class="lefttop">
            <div>工单统计</div>
            <span>2022.11.01 ~ 2022.11.19</span>
          </div>
          <div class="leftbody">
            <div class="d1">
              <h1>{{gdtotal}}</h1>
              <span>工单总数(个)</span>
            </div>
            <div class="d1">
              <h1>{{gdfinish}}</h1>
              <span>完成工单(个)</span>
            </div>
            <div class="d1">
              <h1>{{gdjinxing}}</h1>
              <span>进行工单(个)</span>
            </div>
            <div class="d1">
              <h1>{{gdcancel}}</h1>
              <span>取消工单(个)</span>
            </div>
          </div>
        </div>
        <div class="mainright">
          <div class="lefttop">
            <div>销售统计</div>
            <span>2022.11.01 ~ 2022.11.19</span>
          </div>
          <div class="leftbody">
            <div class="d1">
              <h1>{{orderNum}}</h1>
              <span>订单量(个)</span>
            </div>
            <div class="d1">
              <h1>{{salePrice}}</h1>
              <span>销售额(万元)</span>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
          <div class="listtop">
              <div>商品热榜</div>
            <span>2022.11.01 ~ 2022.11.19</span>
          </div>
          <div class="listbody">
                 <el-row v-for="(item,index) in goodsList" :key="index">
  <el-col :span="5"><div class="grid-content bg-purple">
       <div :class= active[index]><span>{{index+1}}</span></div>
    </div></el-col>
  <el-col :span="13"><div class="grid-content bg-purple-light">{{item.skuName}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">{{item.count}}单</div></el-col>
</el-row>

          </div>
      </div>
       <div class="sale">
      <div class="header">
          <div class="left">
             <div>销售数据</div>
             <span>2022.11.14 ~ 2022.11.19</span>
          </div>
          <div class="week-month-year">
                <div class="item is-checked">周</div>
                <div class="item">月</div>
                <div class="item">年</div> 
          </div>     
      </div>
           <div class="charts"> 
                  <Charts></Charts>
                 <ChartsRight></ChartsRight>
           </div>
        </div>
        </div>
        <div class="allfoot">
            <div class="foot">
           <h4>合作商点位数Top5</h4>
           <i class="iconfont iconfont icon-xiaoxi"></i>
          <ChartsFoot></ChartsFoot>
           <div class="right">
             <h2>16</h2>
             <span>点位数</span>
             <h2>5</h2>
             <span>合作商数</span>
           </div>
        </div>
         <div class="footright">
              <h4>异常设备监控</h4>
             <i class="iconfont iconfont icon-xiaoxi"></i>
             <div class="mid">
              <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
             </div>
              <div class="data">暂无数据</div>
         </div>
        </div>
      
           
    </div>
      
  </div>
</template>

<script>
import {nowtimes} from '@/utils/format'
import {gongdan,gongdanStatistics,gongdanStatistics1,goods} from '@/api/auth'
import Charts from '@/components/echarts.vue'
import ChartsRight from '@/components/echartsRight.vue'
import ChartsFoot from '@/components/echartsfoot.vue'
export default {
 components:{
    Charts,
    ChartsRight,
    ChartsFoot
  },
  data(){
    return {
     orderNum:'',
     salePrice:'',
     gdtotal:'',
     gdfinish:'',
     gdjinxing:'',
     gdcancel:'',
     goodsList:[],
     active:['top1','top2','top3','top4','top5','top6','top7','top8','top9',]
    }
  },
async created(){
  let date=new Date();
let start1 = date.setDate(1);  
console.log(start1);
const newDay = new Date(start1)
console.log(newDay);
let start = newDay.Format("yyyy-MM-dd hh:mm:ss")
  let a = new Date()
let end = a.Format("yyyy-MM-dd hh:mm:ss")
console.log(start,end);
   const res = await gongdanStatistics(start,end)
   console.log(res);
   this.orderNum = res
 const res1 = await gongdanStatistics1(start,end)
 console.log(res1);
 this.salePrice = (res1 / 1000000).toFixed(2)
  const res2 = await gongdan(start,end)
  console.log(start,end);
  console.log(res2);
  this.gdtotal = res2.reduce((sum,item)=> sum+item.total,0)
  this.gdcancel = res2.reduce((sum,item)=> sum+item.cancelTotal,0)
  this.gdfinish =  res2.reduce((sum,item)=> sum+item.completedTotal,0)
  this.gdjinxing =  res2.reduce((sum,item)=> sum+item.progressTotal,0)
 let start3 = newDay.Format("yyyy-MM-dd")
  let end2 = a.Format("yyyy-MM-dd")
  const res3 = await goods(10,start3,end2)
  console.log(res3);
  res3.sort((a,b) =>  b.count - a.count)
  console.log(res3);
  this.goodsList = res3
 }, 
}
</script>

<style scoped lang="scss">
.maincontain {
  position: absolute;
  background-color: #f8fafd;
  top: 80px;
  left: 150px;
  width: 90%;
  height: 1000px;
 .maintop{
   position: relative;

  .list {
   position: absolute;
   right: 0;
   top: 0;
   
    
    width: 500px;
    height: 508px;
 
    border-radius: 20px;
    .listtop{
      display: flex;
      padding: 20px;
      background-color: #fff;
      border-radius: 20px;
       div {
        color: black;
        font-weight: 700;
        font-size: 15px;
      }
      span {
        margin-left: 5px;
        font-size: 10px;
        color: #b4aeb4;
      }
    }
  }
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}
.maincontain {
 
  .mainhead {
    display: flex;
    width: 1200px;
    height: 140px;
    //  background-color: pink;
    margin-left: 0px;
    margin-top: 18px;
    margin-right: 18px;
    margin-bottom: 18px;
  }
  .mainleft {
    width: 700px;
    height: 160px;
    background-color: #e9f3ff;
    background-image: url(~@/assets/icon2.png), url(~@/assets/icon1.png);
    background-repeat: no-repeat;
    background-position: 0 0, calc(100% - 12px) 100%;
    background-position-x: 0px, calc(100% - 12px);
    background-position-y: 0px, 100%;
    border-radius: 20px;
    h1 {
      color: #072074;
      font-style: normal;
      text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
    }
    span {
      font-size: 12px;
      color: #9cabdd;
    }
    .lefttop {
      display: flex;
      margin-top: 10px;
      margin-left: 10px;
      div {
        color: black;
        font-weight: 700;
        font-size: 15px;
      }
      span {
        margin-left: 5px;
        font-size: 10px;
        color: #b4aeb4;
      }
    }
    .leftbody {
      display: flex;
      justify-content: space-around;
      div {
        margin-top: 10px;
        width: 80px;
        height: 80px;
        // background-color: pink;
      }
    }
  }
  .mainright {
    width: 600px;
    height: 160px;
    margin-left: 15px;
    border-radius: 20px;
    background-color: #fbefe8;
    background-image: url(), url(~@/assets/icon3.png);
    background-repeat: no-repeat;
    background-position: 0 0, calc(100% - 12px) 100%;
    background-position-x: 0px, calc(100% - 12px);
    background-position-y: 0px, 100%;
    border-radius: 20px;
    h1 {
      color: #ff5757;
      font-style: normal;
      text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
    }
    span {
      font-size: 12px;
      color: #dfa6b1;
    }
    .lefttop {
      display: flex;
      margin-top: 10px;
      margin-left: 10px;
      div {
        color: black;
        font-weight: 700;
        font-size: 15px;
      }
      span {
        margin-left: 5px;
        font-size: 10px;
        color: #b4aeb4;
      }
    }
    .leftbody {
      display: flex;
      justify-content: space-around;
      div {
        margin-top: 10px;
        width: 80px;
        height: 80px;
        // background-color: pink;
      }
    }
  }
}

.d1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.d2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.d3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.d4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sale {
margin-top: 60px;
  
  height: 328px;
  width: 1200px;
  border-radius: 20px;
  background-color: #fff;
   .charts{
    display: flex;
    .leftchart{
      width: 600px;
      height: 278px;

    }
    .rightchart{
       width: 600px;
      height: 278px;

    }
   }

  .header {
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
    width: 100%;
    height: 34px;
    .week-month-year{
      text-align: center;
    display: flex;
     width: 129px;
     height: 34px;
     line-height: 34px;
      background: rgba(233,243,255,.37);
    border-radius: 10px;
      .item{
        width: 37px;
        height: 25px;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .left {
      width: 1100px;
      display: flex;
      div {
        color: black;
        font-weight: 700;
        font-size: 15px;
      }
      span {
        margin-left: 5px;
        font-size: 10px;
        color: #b4aeb4;
      }
    }
  }

}
.maincontain .el-row[data-v-7eb2bc79] {
    margin-bottom: 10px;
}
.el-row {
  line-height: 36px;
}
.maincontain .bg-purple-light[data-v-7eb2bc79] {
    background:#ffffff;
}
.listbody {
  background-color: #ffffff;
  border-radius: 20px;
  .top1{
    position: relative;
    top: 7px;
    width: 21px;
    height: 20px;
    background: url();
    color: #8e5900;
    span{
      position: absolute;
      top: -9px;
      left: 6px;
    }
  }
   .top2{
    position: relative;
     top: 7px;
    width: 21px;
    height: 20px;
    background: url();
    color: #494949;
    span{
      position: absolute;
      top: -9px;
      left: 6px;
    }
  }
   .top3{
    position: relative;
     top: 7px;
       width: 21px;
    height: 20px;
    background: url();
    color: #cf6d3d;
    span{
      position: absolute;
      top: -9px;
      left: 6px;
    }
  }
     .top4{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
    .top5{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
    .top6{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
    .top7{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
    .top8{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
    .top9{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
}
.maincontain .bg-purple[data-v-7eb2bc79] {
    background: #fff;
    padding-left: 20px;
   
}
.grid-content{
  line-height: 36px;
}
.left{
  background-color: #fff;
}
.week-month-year{
   background-color: #fff;
}
.foot{
  position: relative;
  margin-right: 30px;
  display: flex;
  width: 900px;
  height: 360px;

  background-color: #fff;

  border-radius: 20px;
      .right{
        text-align: center;
        h2 {
          color: #072074;
        }
        span {
          color: #000c20;
        }
      }
    h4 {
      margin-left: 20px;
    }
    .iconfont{
     position: absolute;
     right: 20px;
     top: 20px;
    
  
      font-size:25px;
      color: #aabeff;
    }
    .left {
      position: absolute;
      top: 90px;
      width: 540px;
      height: 280px;
      background-color: #fff;
    }
    .right {
      position: absolute;
      width: 150px;
      height: 230px;
      top: 100px;
      right: 80px;
      border-radius: 20px;
      background-color: #f8f8f9;
      
    }
}
.footright{

position: relative;
  border-radius: 20px;

  height: 360px;
  width: 825px;
  background-color: #fff;
  .data{
    position: absolute;
    top: 72%;
    left: 44%;
  }
  .mid {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 150px;
    height: 100px;
    // background-color: pink;
  }
  h4 {
      margin-left: 20px;
  }
   .iconfont{
   
    position: absolute;
 right: 20px;
     top: 20px;
    
      font-size:25px;
      color: #aabeff;
    }
}
.allfoot{
display: flex;
margin-top: 20px;

  width: 100%;
  height: 360px;

}
.listbody {
  background-color: #ffffff;
  border-radius: 20px;
  .top1{
    position: relative;
    top: 7px;
    width: 21px;
    height: 20px;
    background: url();
    color: #8e5900;
    span{
      position: absolute;
      top: -9px;
      left: 6px;
    }
  }
   .top2{
    position: relative;
     top: 7px;
    width: 21px;
    height: 20px;
    background: url();
    color: #494949;
    span{
      position: absolute;
      top: -9px;
      left: 6px;
    }
  }
   .top3{
    position: relative;
     top: 7px;
       width: 21px;
    height: 20px;
    background: url();
    color: #cf6d3d;
    span{
      position: absolute;
      top: -9px;
      left: 6px;
    }
  }
     .top4{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
    .top5{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
    .top6{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
    .top7{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
    .top8{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
    .top9{
    position: relative;
     top: 7px;
    left: -8px;
     display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
    span{
      position: absolute;
      top: -1px;
      left: 6px;
    }
  }
}
.maincontain .bg-purple-light[data-v-8a54e678] {
    background: #FFF;
}
.maincontain .bg-purple[data-v-8a54e678] {
    background: #fff;
}
</style>